<template>
  <div>
    <div :class="uiStyleType == 3 ? 'theme-market' : ''">
      <div v-if="orderBy == 1">
        <div v-for="(item,index) in itemList" :key="index" @click="clickMarketItem(index)" v-if="index < showCount">
          <div v-if="item.otherStatus != 1"
            :class="index != itemList.length -1 ? 'c-mb24' : ''"
            :style="getInnerSpacing(marginSettings, 1, itemList.length -1)"
          >
            <div class="c-flex-row c-bg-white c-br16 c-text-hidden">
              <template v-if="uiStyleType == 2 || uiStyleType == 3 || item.marketType == 'collocationBuy'">
                <div :class="isSetPageBackground ? 'c-mv-auto' : ''">
                  <div class="c-ww240 c-boxSizing-c c-text-hidden c-p" :class="!isSetPageBackground ? 'c-br16' : ''" :style="getImageRatio(imageSetting, '3 / 2')">
                    <vip-custom-img v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" :imgShowType="'custom'" :cover="item.cover" :imgClass="'imgCloseBig'" :imageSetting="imageSetting" :hasText="false"/>
                    <custom-img v-else class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>
                    <div class="c-fc-white c-fs18 c-index-market c-br-br16 c-pa c-p-t0 c-p-l0 c-ph12 c-hh28 c-lh28 c-pz10"><i class="iconfont c-mr4 c-fs20" v-html="getUnicode(item.marketType)"></i>{{getTypeName(item.marketType)}}</div>
                    <div class="c-fc-white c-fs18 c-translucent-balck50 c-br-tl16 c-pa c-p-b0 c-p-r0 c-ph12 c-hh28 c-lh28 c-pz10" v-if="item.marketType == 'collocationBuy'">{{item.comboType === 1 ? '自选套餐' : '固定套餐'}}</div>
                  </div>
                </div>
                <template v-if="uiStyleType == 3">
                  <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-ml20" :class="isSetPageBackground ? 'c-pv10 c-pr10' : ''">
                    <div class="c-fs24 c-lh32 c-fc-xblack c-fw-b" :class="getTitleVisible">{{item.name}}</div>
                    <div class="c-flex-row c-aligni-center c-mt10">
                      <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                      <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)">
                        <template v-slot="{ timeInfo }">
                          <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                            <div class="c-mr6 c-fs20"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                            <div class="c-ph4">:</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                            <div class="c-ph4">:</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                          </div>
                        </template>
                      </cj-clocker>
                    </div>
                    <tempalte v-if="!$isWxAppIos()">
                      <div class="c-flex-row c-aligni-center c-ph12 c-pv8 c-br20 theme-bg-10 c-mt14">
                        <div class="c-fs20 theme-fc c-pr20 c-w0 c-flex-grow1">
                          <div class="c-fw-b c-fs26">
                            <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                            <span v-html="$getPriceStyleHtml(getPrice(item), getFreePriceShow(item))"></span><span v-if="item.captainPriceType == 2" class="c-fs20">起</span>
                          </div>
                          <div class="c-text-decoration-through c-lh22">
                            {{'￥' | iosPriceFilter}}<span v-html="$getPriceStyleHtml(Number(getProdPrice(item)).toFixed(2))"></span>
                          </div>
                        </div>
                        <span class="c-fs20 c-fw-b c-br20 c-fc-white c-textAlign-c c-ww88 c-hh40 c-lh40" :class="isActivityStart(item) ? 'theme-bg-gradient' : 'c-bg-ccc'">马上抢</span>
                      </div>
                    </tempalte>
                  </div>
                </template>
                <template v-else>
                  <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-ml20" :class="isSetPageBackground ? 'c-pv10 c-pr10' : ''">
                    <div class="c-fs24 c-lh32 c-fc-xblack c-fw-b" :class="getTitleVisible">{{item.name}}</div>
                    <div class="c-flex-row c-aligni-center c-mt10" v-if="item.marketType != 'collocationBuy' || (item.marketType == 'collocationBuy' && visible.statusVisible)">
                      <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                      <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)">
                        <template v-slot="{ timeInfo }">
                          <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                            <div class="c-mr6 c-fs20"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                            <div class="c-ph4">:</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                            <div class="c-ph4">:</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                          </div>
                        </template>
                      </cj-clocker>
                    </div>
                    <div class="c-lh c-mt12 c-mb10" v-if="item.marketType == 'collocationBuy' && visible.dataVisible && (Number(item.collocationPrice) - Number(item.price)) > 0 && !$isWxAppIos()">
                      <div class="c-fs20 c-fc-xmlred c-br4 c-p bd1-FF300C c-inlineblack c-pl32 c-text-hidden c-vcAlign-middle c-pv2 c-lh c-maxw c-text-ellipsis1 c-boxsizing-c c-pr5">
                        <span class="iconfont c-fs28 c-pa p-l-2 c-p-t0">&#xe758;</span>{{item.comboType == 1 || (item.comboType == 2 && item.specType == 2 && (item.collocationPrice - item.price) > 0) ? '最多可省' : '立省'}}{{'￥' | iosPriceFilter}}{{(Number(item.collocationPrice) - Number(item.price)) | toMyFixed2}}
                      </div>
                    </div>
                    <tempalte v-if="!$isWxAppIos()">
                      <div class="c-flex-row c-aligni-center c-justify-sb c-hh40 c-justify-sb c-br24 c-text-hidden" :class="isActivityStart(item) ? 'activityBg' : 'noActivityBg'" v-if="item.marketType == 'collocationBuy'">
                        <div class="c-fs20 c-text-ellipsis1 c-fc-white marketBtnBg1 c-hh40 c-lh40 c-textAlign-c c-pr20 ww250">
                          <span v-if="Number(getPrice(item)) != 0" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                          <span class="c-fc-white c-fw-b c-fs26" v-html="$getPriceStyleHtml(getPrice(item))"></span><span v-if="item.comboType == 2 && item.specType == 2" class="c-fs20 c-fc-white">起</span>
                        </div>
                        <span class="c-fs20 c-fw-b c-pr10" :class="isActivityStart(item) ? 'c-fc-xmlred' : 'c-fc-sgray'">{{isActivityStart(item) ? '立即抢' : item.pcStatus == 1 ? '待开始' : '已结束'}}</span>
                      </div>
                      <div class="c-flex-row c-aligni-center c-justify-sb c-hh40 c-justify-sb c-br24" v-else :class="isActivityStart(item) ? 'activityBg' : 'noActivityBg'">
                        <div class="c-fs20 c-text-ellipsis1 c-fc-white marketBtnBg1 c-pr20 ww250 c-hh40 c-lh40 c-pl10">
                          <span class="c-fc-white c-textAlign-r c-fw-b c-fs26">
                            <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                            <span v-html="$getPriceStyleHtml(getPrice(item), getFreePriceShow(item))"></span><span v-if="item.captainPriceType == 2" class="c-fs20">起</span>
                          </span>
                          <span class="c-text-decoration-through c-pl12">{{'￥' | iosPriceFilter}}
                            <span v-html="$getPriceStyleHtml(Number(getProdPrice(item)).toFixed(2))"></span>
                          </span>
                        </div>
                        <span class="c-pr8 c-fs20 c-fw-b" :class="isActivityStart(item) ? 'c-fc-xmlred' : 'c-fc-sgray'">马上抢</span>
                      </div>
                    </tempalte>
                  </div>
                </template>
              </template>
              <template v-else>
                <div class="c-mv-auto">
                  <div class="c-ww240 c-text-hidden c-p" :class="!isSetPageBackground ? 'c-br16' : ''" :style="getImageRatio(imageSetting, '3 / 2')">
                    <vip-custom-img :cover="item.cover" :imgShowType="'custom'" :imgClass="'imgCloseBig'" :hasText="false" :imageSetting="imageSetting"
                      v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)"/>
                    <custom-img v-else class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>

                  </div>
                </div>
                <div class="c-flex-column c-justify-sb c-flex-grow1 c-ml20 c-w0" :class="isSetPageBackground ? 'c-pv10 c-pr10' : ''">
                  <div class="c-fs24 c-lh36 c-fc-xblack c-fw-b" :class="getTitleVisible"><span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">{{getTypeName(item.marketType)}}</span>{{item.name}}</div>
                  <div v-if="showimeStatusTxt(item)" class="c-flex-row c-fs18 c-fc-gray">{{getTimeStatusTxt(item)}}
                    <cj-clocker :time="clockerTimeFun(index)" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index)">
                    </cj-clocker>
                  </div>
                  <div class="c-fs18 c-fc-gray c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
                    <span v-if="visible.priceVisible" class="theme-fc c-fs24 c-textAlign-r c-fw-b" :class="Number(getPrice(item)) == 0 ? 'c-fs22' : 'c-fs24'">
                      <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)">{{'￥' | iosPriceFilter}}</span>
                      <template v-if="item.marketType != 'friendHelperList'">{{item.marketType == 'collageList' && item.captainPriceType == 2 ? `${getPrice(item)}起` : getPrice(item) | moneyStr}}</template>
                      <template v-else>{{getPrice(item)}}</template>
                    </span>
                    <span v-if="visible.originalPriceVisible" class="c-text-decoration-through c-pl10 c-mb1">{{'￥' | iosPriceFilter}}{{Number(getProdPrice(item)).toFixed(2)}}</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="c-w100" v-if="orderBy == 2">
        <div class="c-flex-row c-flexw-wrap c-justify-sb c-w100">
          <div class="c-flex-column c-bg-white w50-8 c-text-hidden c-br16"
            :class="[isSetMarginBottom(index, itemList.filter((item, index) => {return index < showCount && item.otherStatus != 1}), 2) ? 'c-mb24' : '', isSetPageBackground && isShowTxtArea(item) ? 'c-pb12' : '']"
            :style="getInnerSpacingWidth(marginSettings, 1) + getInnerSpacing(marginSettings, 1, isSetMarginBottom(index, itemList.filter((item, index) => {return index < showCount && item.otherStatus != 1}), 2))"
            v-for="(item,index) in itemList.filter((item, index) => {return index < showCount && item.otherStatus != 1})" :key="index" @click="clickMarketItem(index)">
            <template v-if="uiStyleType == 2 || uiStyleType == 3 || item.marketType == 'collocationBuy'">
              <div class="c-w100 c-p c-text-hidden" :class="!isSetPageBackground ? 'c-br16' : ''" :style="getImageRatio(imageSetting, '3 / 2')">
                <vip-custom-img :cover="item.cover" :imgShowType="'custom'" :imgClass="'imgCloseBig'" :fontClass="{
                  boxStyle: 'c-pt40 c-pb48 c-pl12',
                  name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                  duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
                  :imageSetting="imageSetting"
                  v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2) && item.vipInfo"/>
                <custom-img v-else class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>

                <div class="c-fc-white c-fs18 c-index-market c-br-br16 c-pa c-p-t0 c-p-l0 c-ph12 c-hh28 c-lh28 c-pz10"><i class="iconfont c-mr4 c-fs20" v-html="getUnicode(item.marketType)"></i>{{getTypeName(item.marketType)}}</div>
                <div class="c-fc-white c-fs18 c-translucent-balck50 c-br-tl16 c-pa c-p-b0 c-p-r0 c-ph12 c-hh28 c-lh28 c-pz10" v-if="item.marketType == 'collocationBuy'">{{item.comboType === 1 ? '自选套餐' : '固定套餐'}}</div>
              </div>
              <template v-if="uiStyleType == 3">
                <div :class="!isSetPageBackground ? 'c-ph10' : 'c-ph16'">
                  <div class="c-fs24 c-lh32 c-fc-xblack c-mt16 c-fw-b" :class="getTitleVisible">{{item.name}}</div>
                  <div class="c-flex-row c-aligni-center c-mt10">
                    <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                    <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)">
                      <template v-slot="{ timeInfo }">
                        <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                          <div class="c-mr6 c-fs20"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                          <div class="c-ph4">:</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                          <div class="c-ph4">:</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                        </div>
                      </template>
                    </cj-clocker>
                  </div>
                  <tempalte v-if="!$isWxAppIos()">
                    <div class="c-flex-row c-aligni-center c-ph12 c-pv8 c-br20 theme-bg-10 c-mt14">
                      <div class="c-fs20 theme-fc c-pr20 c-w0 c-flex-grow1">
                        <div class="c-fw-b c-fs26">
                          <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                          <span v-html="$getPriceStyleHtml(getPrice(item), getFreePriceShow(item))"></span><span v-if="item.captainPriceType == 2" class="c-fs20">起</span>
                        </div>
                        <div class="c-text-decoration-through c-lh22">
                          {{'￥' | iosPriceFilter}}<span v-html="$getPriceStyleHtml(Number(getProdPrice(item)).toFixed(2))"></span>
                        </div>
                      </div>
                      <span class="c-fs20 c-fw-b c-br20 c-fc-white c-textAlign-c c-ww88 c-hh40 c-lh40" :class="isActivityStart(item) ? 'theme-bg-gradient' : 'c-bg-ccc'">抢购</span>
                    </div>
                  </tempalte>
                </div>
              </template>
              <template v-else>
                <div :class="!isSetPageBackground ? 'c-ph10' : 'c-ph16'">
                  <div class="c-fs24 c-lh32 c-mb14 c-wordBreakAll c-mt16 c-fw-b" :class="getTitleVisible">{{item.name}}</div>
                  <div class="c-flex-row c-aligni-center c-mt14" v-if="item.marketType != 'collocationBuy' || (item.marketType == 'collocationBuy' && visible.statusVisible)">
                    <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                    <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)">
                      <template v-slot="{ timeInfo }">
                        <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                          <div class="c-mr6"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                          <div class="c-ph4">:</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                          <div class="c-ph4">:</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                        </div>
                      </template>
                    </cj-clocker>
                  </div>
                  <tempalte v-if="!$isWxAppIos()">
                    <div class="c-flex-row c-aligni-center c-justify-sb c-hh40 c-justify-sb c-br24 c-text-hidden c-mt16" :class="isActivityStart(item) ? 'activityBg' : 'noActivityBg'" v-if="item.marketType == 'collocationBuy'">
                      <div class="c-fs20 c-text-ellipsis1 c-fc-white marketBtnBg2 c-hh40 c-lh40 c-pr18 c-textAlign-c" :class="isSetPageBackground && item.marketType == 'collocationBuy' ? 'c-ww180' : 'c-ww190'">
                        <span v-if="Number(getPrice(item)) != 0" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                        <span class="c-fc-white c-fw-b c-fs26" v-html="$getPriceStyleHtml(getPrice(item))"></span><span v-if="item.comboType == 2 && item.specType == 2" class="c-fs20 c-fc-white">起</span>
                      </div>
                      <span class="c-fs20 c-fw-b c-pr10" :class="isActivityStart(item) ? 'c-fc-xmlred' : 'c-fc-sgray'">{{isActivityStart(item) ? '立即抢' : item.pcStatus == 1 ? '待开始' : '已结束'}}</span>
                    </div>
                    <div class="c-flex-row c-aligni-center c-justify-sb c-br24 c-hh40 c-mt16" :class="isActivityStart(item) ? 'activityBg' : 'noActivityBg'" v-else>
                      <div class="c-fs20 c-text-ellipsis1 c-fc-white marketBtnBg2 c-ww240 c-hh40 c-lh40 c-pl10">
                        <span class="c-fc-white c-textAlign-r c-fw-b c-fs26">
                          <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                          <span v-html="$getPriceStyleHtml(getPrice(item), getFreePriceShow(item))"></span><span v-if="item.captainPriceType == 2" class="c-fs20">起</span></span>
                        <span class="c-fs20 c-lh28 c-fc-white c-text-decoration-through c-pl4">{{'￥' | iosPriceFilter}}<span v-html="getProdPrice(item)"></span></span>
                      </div>
                      <span class="c-pr6 c-fs20 c-fw-b" :class="isActivityStart(item) ? 'c-fc-xmlred' : 'c-fc-sgray'">抢</span>
                    </div>
                  </tempalte>
                  <div class="c-ph10 c-mt10" v-if="item.marketType == 'collocationBuy' && visible.dataVisible && (Number(item.collocationPrice) - Number(item.price)) > 0 && !$isWxAppIos()">
                    <div class="c-fs20 c-fc-xmlred c-br4 c-p bd1-FF300C c-inlineblack c-pl32 c-text-hidden c-vcAlign-middle c-pv2 c-lh c-maxw c-text-ellipsis1 c-boxsizing-c c-pr5">
                      <span class="iconfont c-fs28 c-pa p-l-2 c-p-t0">&#xe758;</span>{{item.comboType == 1 || (item.comboType == 2 && item.specType == 2 && (item.collocationPrice - item.price) > 0) ? '最多可省' : '立省'}}{{'￥' | iosPriceFilter}}{{(Number(item.collocationPrice) - Number(item.price)) | toMyFixed2}}
                    </div>
                  </div>
                </div>
              </template>
            </template>
            <template v-else>
              <div class="c-w100 c-p c-text-hidden" :class="!isSetPageBackground ? 'c-br16' : ''" :style="getImageRatio(imageSetting, '3 / 2')">
                <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :fontClass="{
                  boxStyle: 'c-pt40 c-pb48 c-pl12',
                  name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                  duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
                  :imgShowType="'custom'"
                  :imageSetting="imageSetting"
                  v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2) && item.vipInfo"/>
                <custom-img v-else class="c-w100 c-h c-text-hidden" :imgShowType="'custom'" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>

                <div class="timeShow c-pz7 c-p" v-if="showimeStatusTxt(item)">{{getTimeStatusTxt(item)}}
                  <cj-clocker :time="clockerTimeFun(index)" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index)">
                  </cj-clocker>
                </div>
                <div class="timeShow c-pz7 c-p" v-if="item.status == 3 || item.status == 4">{{item.status == 3 ? '已结束' : '已停止'}}</div>
              </div>
              <div class="c-fs24 c-lh32 c-mb6 c-mt16 c-fw-b" :class="[!isSetPageBackground ? 'c-ph10' : 'c-ph16', getTitleVisible]">
                <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle c-fw-b">{{getTypeName(item.marketType)}}</span>{{item.name}}
              </div>
              <div class="c-flex-row c-aligni-end":class="!isSetPageBackground ? 'c-ph10' : 'c-ph16'" v-if="!$isWxAppIos()">
                <span v-if="visible.priceVisible" class="theme-fc c-fs24 c-textAlign-r c-fw-b" :class="Number(getPrice(item)) == 0 ? 'c-fs22' : 'c-fs24'">
                  <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)">{{'￥' | iosPriceFilter}}</span>
                  <template v-if="item.marketType != 'friendHelperList'">{{item.marketType == 'collageList' && item.captainPriceType == 2 ? `${getPrice(item)}起` : getPrice(item) | moneyStr}}</template>
                  <template v-else>{{getPrice(item)}}</template>
                </span>
                <div v-if="visible.originalPriceVisible" class="c-fs18 c-fc-gray c-text-decoration-through c-pl10 c-mb1">{{'￥' | iosPriceFilter}}{{getProdPrice(item)}}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="c-w100" v-if="orderBy == 4">
        <div v-for="(item,index) in itemList" :key="index" @click="clickMarketItem(index)"
          :class="index != itemList.length - 1 ? 'c-mb24' : ''"
          :style="getInnerSpacing(marginSettings, 1, index != itemList.length - 1)"
        >
          <div class="c-flex-column c-w100 c-bg-white c-br16 c-text-hidden" :class="isSetPageBackground ? 'c-pb20' : 'c-pb12'" v-if="index < showCount && item.otherStatus != 1">
            <div class="c-w100 c-p c-text-hidden" :class="!isSetPageBackground ? 'c-br16' : ''" :style="getImageRatio(imageSetting, '3 / 2')">
              <vip-custom-img :cover="item.cover" :imgShowType="'custom'" :imgClass="'imgCloseBig'" :fontClass="{
                boxStyle: 'c-pt40 c-pb48 c-pl12',
                name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
                :imageSetting="imageSetting"
                v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2) && item.vipInfo"/>
              <custom-img v-else class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>

              <div class="c-fc-white c-fs18 c-index-market c-br-br16 c-pa c-p-t0 c-p-l0 c-ph12 c-hh28 c-lh28 c-pz10"><i class="iconfont c-mr4 c-fs20" v-html="getUnicode(item.marketType)"></i>{{getTypeName(item.marketType)}}</div>
              <div class="c-fc-white c-fs18 c-translucent-balck50 c-br-tl16 c-pa c-p-b0 c-p-r0 c-ph12 c-hh28 c-lh28 c-pz10" v-if="item.marketType == 'collocationBuy'">{{item.comboType === 1 ? '自选套餐' : '固定套餐'}}</div>
            </div>
            <template v-if="uiStyleType == 3">
              <div class="c-fs24 c-lh32 c-mt20 c-fc-xblack c-fw-b" :class="[!isSetPageBackground ? 'c-ph10' : 'c-ph20', getTitleVisible]">{{item.name}}</div>
              <div class="c-flex-row c-aligni-center c-mt10" :class="!isSetPageBackground ? 'c-ph10' : 'c-ph20'">
                <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)">
                  <template v-slot="{ timeInfo }">
                    <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                      <div class="c-mr6 c-fs20"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                      <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                      <div class="c-ph4">:</div>
                      <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                      <div class="c-ph4">:</div>
                      <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                    </div>
                  </template>
                </cj-clocker>
              </div>
              <tempalte v-if="!$isWxAppIos()" :class="isSetPageBackground ? 'scale96' : ''">
                <div class="c-flex-row c-aligni-center c-ph12 c-pv16 c-br20 theme-bg-10 c-mt14">
                  <div class="c-fs20 theme-fc c-pr20 c-flex-grow1 c-flex-row c-aligni-center">
                    <div class="c-fw-b c-fs26">
                      <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                      <span v-html="$getPriceStyleHtml(getPrice(item), getFreePriceShow(item))"></span><span v-if="item.captainPriceType == 2" class="c-fs20">起</span>
                    </div>
                    <div class="c-text-decoration-through c-ml10">
                      {{'￥' | iosPriceFilter}}<span v-html="$getPriceStyleHtml(Number(getProdPrice(item)).toFixed(2))"></span>
                    </div>
                  </div>
                  <span class="c-fs20 c-fw-b c-br20 c-fc-white c-textAlign-c c-ww88 c-hh40 c-lh40" :class="isActivityStart(item) ? 'theme-bg-gradient' : 'c-bg-ccc'">马上抢</span>
                </div>
              </tempalte>
            </template>
            <template v-else>
              <div class="c-fs28 c-lh32 c-wordBreakAll c-mt20 c-fw-b" :class="[!isSetPageBackground ? 'c-ph10' : 'c-ph20', getTitleVisible]">{{item.name}}</div>
              <div class="c-mt10" :class="!isSetPageBackground ? 'c-ph10' : 'c-ph20'" v-if="item.marketType == 'collocationBuy' && visible.dataVisible && (Number(item.collocationPrice) - Number(item.price)) > 0 && !$isWxAppIos()">
                <div class="c-fs20 c-fc-xmlred c-br4 c-p bd1-FF300C c-inlineblack c-pl32 c-text-hidden c-vcAlign-middle c-pv2 c-lh c-maxw c-text-ellipsis1 c-boxsizing-c c-pr5">
                  <span class="iconfont c-fs28 c-pa p-l-2 c-p-t0">&#xe758;</span>{{item.comboType == 1 || (item.comboType == 2 && item.specType == 2 && (item.collocationPrice - item.price) > 0) ? '最多可省' : '立省'}}{{'￥' | iosPriceFilter}}{{(Number(item.collocationPrice) - Number(item.price)) | toMyFixed2}}
                </div>
              </div>
              <div v-if="!$isWxAppIos()" :class="isSetPageBackground ? 'scale96' : ''">
                <div class="c-flex-row c-aligni-center c-justify-sb c-hh60 c-justify-sb c-br30 c-text-hidden c-mt20" :class="isActivityStart(item) ? 'activityBg' : 'noActivityBg'" v-if="item.marketType == 'collocationBuy'">
                  <div class="c-fs20 c-text-ellipsis1 c-fc-white marketBtnBg4 c-hh60 c-lh60 c-pr24 c-ww260 c-textAlign-c">
                    <span v-if="Number(getPrice(item)) != 0" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                    <span class="c-fc-white c-fw-b c-fs30" v-html="$getPriceStyleHtml(getPrice(item))"></span><span v-if="item.comboType == 2 && item.specType == 2" class="c-fs20 c-fc-white">起</span>
                  </div>
                  <div class="c-flex-grow1 c-flex-row c-aligni-center c-ml10">
                    <template v-if="item.marketType != 'collocationBuy' || (item.marketType == 'collocationBuy' && visible.statusVisible)">
                      <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                      <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)" class="c-mr18">
                        <template v-slot="{ timeInfo }">
                          <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                            <div class="c-mr6 c-fs20"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                            <div class="c-ph4">:</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                            <div class="c-ph4">:</div>
                            <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                          </div>
                        </template>
                      </cj-clocker>
                    </template>
                    <span class="c-fs20 c-fw-b" :class="isActivityStart(item) ? 'c-fc-xmlred' : 'c-fc-sgray'">{{isActivityStart(item) ? '立即抢' : item.pcStatus == 1 ? '待开始' : '已结束'}}</span>
                  </div>
                </div>
                <div class="c-flex-row c-aligni-center c-hh60 c-justify-sb c-mt20 c-br30 c-text-hidden" :class="isActivityStart(item) ? 'activityBg' : 'noActivityBg'" v-else>
                  <div class="c-ww320 c-fs20 c-text-ellipsis1 c-fc-white c-ph10 c-h c-lh60 marketBtnBg1">
                    <span class="c-fc-white c-textAlign-r c-fw-b c-fs26">
                      <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                      <span v-html="$getPriceStyleHtml(getPrice(item), getFreePriceShow(item))"></span><span v-if="item.captainPriceType == 2" class="c-fs20">起</span>
                    </span>
                    <span class="c-fs20 c-fc-white c-text-decoration-through c-pl12">{{'￥' | iosPriceFilter}}
                      <span>{{getProdPrice(item)}}</span>
                    </span>
                  </div>
                  <div class="c-flex-grow1 c-flex-row c-aligni-center c-pl12">
                    <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                    <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)">
                      <template v-slot="{ timeInfo }">
                        <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                          <div class="c-mr6 c-fs20"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                          <div class="c-ph4">:</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                          <div class="c-ph4">:</div>
                          <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                        </div>
                      </template>
                    </cj-clocker>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n" v-if="orderBy == 5">
        <div class="c-inlineblack c-vcAlign-top" v-for="(item,index) in itemList" :key="index" @click="clickMarketItem(index)">
          <div class="c-flex-column c-ww260 c-bd1 c-mr20 c-br16 c-text-hidden c-bg-white" :class="isSetPageBackground ? 'c-pb12' : ''" :style="getInnerSpacing(marginSettings, 2)" v-if="index < showCount && item.otherStatus != 1">
            <div class="c-ww260 c-p c-text-hidden" :style="getImageRatio(imageSetting, '3 / 2')">
              <vip-custom-img :cover="item.cover" :imgShowType="'custom'" :imgClass="'imgCloseBig'" :fontClass="{
                boxStyle: 'c-pt40 c-pb48 c-pl12',
                name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
                :imageSetting="imageSetting"
                v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2) && item.vipInfo"/>
              <custom-img v-else class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="$addXossFilter(showCover(item))"></custom-img>

              <div class="c-fc-white c-fs18 c-index-market c-br-br16 c-pa c-p-t0 c-p-l0 c-ph12 c-hh28 c-lh28 c-pz10"><i class="iconfont c-mr4 c-fs20" v-html="getUnicode(item.marketType)"></i>{{getTypeName(item.marketType)}}</div>
              <div class="c-fc-white c-fs18 c-translucent-balck50 c-br-tl16 c-pa c-p-b0 c-p-r0 c-ph12 c-hh28 c-lh28 c-pz10" v-if="item.marketType == 'collocationBuy'">{{item.comboType === 1 ? '自选套餐' : '固定套餐'}}</div>
            </div>
            <template v-if="uiStyleType == 3">
              <div class="c-pb16" :class="!isSetPageBackground ? 'c-ph10' : 'c-ph16'">
                <div class="c-fs24 c-lh32 c-fc-xblack c-mt16 c-fw-b c-ws-bs" :class="getTitleVisible">{{item.name}}</div>
                <div class="c-flex-row c-aligni-center c-mt10">
                  <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                  <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)">
                    <template v-slot="{ timeInfo }">
                      <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                        <div class="c-mr6 c-fs20"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                        <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                        <div class="c-ph4">:</div>
                        <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                        <div class="c-ph4">:</div>
                        <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                      </div>
                    </template>
                  </cj-clocker>
                </div>
                <tempalte v-if="!$isWxAppIos()">
                  <div class="c-flex-row c-aligni-center c-ph12 c-pv8 c-br20 theme-bg-10 c-mt14">
                    <div class="c-fs20 theme-fc c-pr20 c-flex-grow1">
                      <div class="c-fw-b c-fs26">
                        <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                        <span v-html="$getPriceStyleHtml(getPrice(item), getFreePriceShow(item))"></span><span v-if="item.captainPriceType == 2" class="c-fs20">起</span>
                      </div>
                      <div class="c-text-decoration-through c-lh22">
                        {{'￥' | iosPriceFilter}}<span>{{getProdPrice(item)}}</span>
                      </div>
                    </div>
                  </div>
                </tempalte>
              </div>
            </template>
            <template v-else>
              <div :class="!isSetPageBackground ? 'c-ph10' : 'c-ph16'">
                <div class="c-fs24 c-ws-bs c-lh32 c-mt16 c-fw-b" :class="getTitleVisible">{{item.name}}</div>
                <div class="c-flex-row c-aligni-center c-mt14" v-if="item.marketType != 'collocationBuy' || (item.marketType == 'collocationBuy' && visible.statusVisible)">
                  <span class="c-fs20 c-fc-sblack">{{getTimeStatusTxt(item)}}</span>
                  <cj-clocker :time="clockerTimeFun(index)" @on-finish="clockerFinishFun(index)" v-if="showimeStatusTxt(item)">
                    <template v-slot="{ timeInfo }">
                      <div class="c-fs20 c-fc-sblack c-flex-row c-aligni-center c-justify-center">
                        <div class="c-mr6 c-fs20"><span class="c-fc-xblack c-fw-b c-ph4 c-fs20">{{timeInfo.D}}</span>天</div>
                        <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.H}}</div>
                        <div class="c-ph4">:</div>
                        <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.M}}</div>
                        <div class="c-ph4">:</div>
                        <div class="c-ww26 c-hh24 c-textAlign-c c-lh24 c-bg-sblack c-fc-white c-br4 c-fs20">{{timeInfo.S}}</div>
                      </div>
                    </template>
                  </cj-clocker>
                </div>
                <tempalte v-if="!$isWxAppIos()">
                  <div class="c-flex-row c-aligni-center c-justify-sb c-hh40 c-justify-sb c-br24 c-text-hidden c-mt16" :class="isActivityStart(item) ? 'activityBg' : 'noActivityBg'" v-if="item.marketType == 'collocationBuy'">
                    <div class="c-fs20 c-text-ellipsis1 c-fc-white marketBtnBg5 c-hh40 c-lh40 c-pl10 c-ww160">
                      <span v-if="Number(getPrice(item)) != 0" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                      <span class="c-fc-white c-fw-b c-fs26" v-html="$getPriceStyleHtml(getPrice(item))"></span><span v-if="item.comboType == 2 && item.specType == 2" class="c-fs20 c-fc-white">起</span>
                    </div>
                    <span class="c-fs20 c-fw-b c-pr10" :class="isActivityStart(item) ? 'c-fc-xmlred' : 'c-fc-sgray'">{{isActivityStart(item) ? '立即抢' : item.pcStatus == 1 ? '待开始' : '已结束'}}</span>
                  </div>
                  <div class="c-flex-row c-aligni-center c-hh40 c-br24 c-justify-sb activityBg c-mt16" v-else>
                    <div class="c-fc-white c-fw-b c-fs26 marketBtnBg5 c-ww150 c-text-ellipsis1 c-hh40 c-lh40 c-pl10">
                      <span v-if="Number(getPrice(item)) != 0 || getFreePriceShow(item)" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                      <span v-html="$getPriceStyleHtml(getPrice(item), getFreePriceShow(item))"></span><span v-if="item.captainPriceType == 2" class="c-fs20">起</span>
                    </div>
                    <div class="c-fs20 c-text-decoration-through c-flex-grow1 c-text-ellipsis1 c-fc-xmlred">{{'￥' | iosPriceFilter}}<span>{{getProdPrice(item)}}</span></div>
                  </div>
                </tempalte>
                <div class="c-fs20 c-fc-xmlred c-br4 c-p bd1-FF300C c-inlineblack c-pl32 c-text-hidden c-vcAlign-middle c-pv2 c-lh c-mt10 c-maxw c-text-ellipsis1 c-boxsizing-c c-pr5" v-if="item.marketType == 'collocationBuy' && visible.dataVisible && (Number(item.collocationPrice) - Number(item.price)) > 0 && !$isWxAppIos()">
                  <span class="iconfont c-fs28 c-pa p-l-2 c-p-t0">&#xe758;</span>{{item.comboType == 1 || (item.comboType == 2 && item.specType == 2 && (item.collocationPrice - item.price) > 0) ? '最多可省' : '立省'}}{{'￥' | iosPriceFilter}}{{(Number(item.collocationPrice) - Number(item.price)) | toMyFixed2}}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showMore && ![4, 5].includes(orderBy)" class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center" @click="clickMore">
      <div class="c-ph20 c-pv8 theme-fc theme-bg-10 c-br50" :style="getMoreColor(headLine) + getHeadLineMore(headLine)">查看更多</div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { goDetails } from "@/utils/goDetails.js";
import { customStyle } from '@/utils/customStyle.js'
import CustomImg from '@/components/templates/customImg.vue'
export default {
  name: "commonMarketitem",
  mixins: [customStyle],
  components: {
    VipCustomImg,
    CustomImg
  },
  props: {
    uiStyleType: {
      type: Number,
      default: 1
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    orderBy: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    itemList: {
      type: Array,
      default: []
    },
    showCount: {
      type: Number,
      default: 1
    },
    showMore: {
      type: Boolean,
      default: false
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    },
    headLine: {
      type: Object,
      default: null
    },
    marginSettings: {
      type: Object,
      default: null
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    imageSetting: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
      ckFrom: global.ckFrom,
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
    };
  },
  computed: {
    isShowTxtArea() {
      return function(item) {
        if (!(this.uiStyleType == 2 || this.uiStyleType == 3 || item.marketType == 'collocationBuy')) {
          return this.visible.priceVisible || this.visible.originalPriceVisible || this.visible.originalPriceVisible != 0;
        }
        return true
      }
    },
    // 砍价、友情灌溉 价格0.00不展示免费 显示￥0.00
    getFreePriceShow() {
      return function(item) {
         return (item.marketType == 'friendHelperList' || (item.marketType == 'bargainList' && item.reservePrice == 0) ) ? false : true
      }
    },
    getTitleVisible() {
      if (this.visible && String(this.visible.titleVisible)) {
        return this.visible.titleVisible == 0 ? 'hide' : this.visible.titleVisible == 1 ? 'c-text-ellipsis1' : this.visible.titleVisible == 2 ? 'c-text-ellipsis2' : '';
      }
      return 'c-text-ellipsis2'
    },
    // 判断是否设置一行两列的底部间距
    // index 索引值 num 2两列 3三列
    isSetMarginBottom() {
      return function (index, list, num) {
       return (index < (list.length % num != 0 ? (list.length - list.length % num) : (list.length - num))) && list.length > num
      }
    },
    isActivityStart() {
      return function (item) {
        let status = item.marketType == 'collageList' || item.marketType == 'bargainList' ? item.status : item.marketType == 'flashSalesList' ? item.sales.status : item.marketType == 'collocationBuy' ? item.pcStatus : item.btnStatus;
        return status == 2 ? true : false;
      }
    },
    showCover() {
      return function (item) {
        let url = '';
        let marketType = item.marketType;
        if (marketType == 'collageList' || marketType == 'bargainList') {
          url = item.cover ? item.cover :
                ((item.prodType == this.ckFrom.collageVip || item.prodType == this.ckFrom.vip) ? require('@/assets/i/wap/course/vip.png') :
                ((item.prodType == this.ckFrom.collageSvip || item.prodType == this.ckFrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png')))
        } else if (item.marketType == 'friendHelperList' || marketType == 'flashSalesList') {
          url = item.vipType == 2 || item.vipType == 4 ? (item.vipType == 2 ? require('@/assets/i/wap/course/vip.png') :
                require('@/assets/i/wap/course/svip.png')) :
                item.avatar ? item.avatar : require('@/assets/defult270.png')
        } else if (marketType == 'collocationBuy') {
          url = item.cover;
        }
        return url;
      }
    },
    getTimeStatusTxt() {
      return function (item) {
        let txt = '';
        let marketType = item.marketType;
        let status = marketType == 'collageList' || marketType == 'bargainList' ? item.status : marketType == 'flashSalesList' ? item.sales.status : marketType == 'collocationBuy' ? item.pcStatus : item.btnStatus;
        txt = status == 1 || status == 2 ? '距' + (status == 1 ? '开始' : '结束') + ':' : status == 3 ? '已结束' : '已停止';
        return txt;
      }
    },
    showimeStatusTxt() {
      return function (item) {
        let marketType = item.marketType;
        let status = marketType == 'collageList' || marketType == 'bargainList' ? item.status : marketType == 'flashSalesList' ? item.sales.status : marketType == 'collocationBuy' ? item.pcStatus : item.btnStatus;
        return [1, 2].includes(status) ? true : false;
      }
    },
    getUnicode() {
      return function(marketType) {
        let map = {
          'collageList': '&#xe613;',
          'bargainList': '&#xe8c5;',
          'flashSalesList': '&#xe688;',
          'friendHelperList': '&#xe617;',
          'collocationBuy': '&#xe858;'
        }
        return map[marketType]
      }
    },
    getTypeName() {
      return function(marketType) {
        let map = {
          'collageList': '拼团',
          'bargainList': '砍价购',
          'flashSalesList': '限时购',
          'friendHelperList': '友情灌溉',
          'collocationBuy': '搭配购'
        }
        return map[marketType]
      }
    },
    getPrice() {
      return function (item) {
        let price = item.price;
        if (item.marketType == 'collageList') {
          price = item.captainPrice;
        } else if (item.marketType == 'bargainList') {
          price = item.reservePrice;
        } else if (item.marketType == 'collocationBuy') {
          if (item.comboType == 2 && item.specType == 2) {
            price = item.minPrice;
          } else {
            price = item.price;
          }
        } else if (item.marketType == 'friendHelperList') {
          price = '0.00'
        }
        return price;
      }
    },
    getProdPrice() {
      return function (item) {
        let price = item.prodPrice;
        if (item.marketType == 'friendHelperList' || item.marketType == 'bargainList') {
          price = item.price;
        }
        return price;
      }
    },
  },
  methods: {
    clickMarketItem(index) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let item = this.itemList[index];
      if (item.marketType == 'collageList') {
        let prodType = item.prodType;
        let prodId = item.prodType == this.ckFrom.edu ? item.jwSalesId : item.prodType == this.ckFrom.collageActivity || item.prodType == this.ckFrom.activity ? item.activityId : item.prodId;
        let query = {}
        if (prodType == this.ckFrom.collageVip || prodType == this.ckFrom.collageSvip || prodType == this.ckFrom.vip || prodType == this.ckFrom.svip) {
          if (item.status < 3) {
            query.isCollage = true;
          } else {
            prodType = this.ckFrom.vip;
          }
        }
        goDetails(this, item.prodType, prodId, query, item.courseType, 1);
        return
      } else if (item.marketType == 'flashSalesList') {
        let prodType = item.prodType;
        let prodId = item.prodType == this.ckFrom.flashSalesActivity || item.prodType == this.ckFrom.activity ? item.activityId : item.prodId;
        let query = {}
        if (prodType == this.ckFrom.flashSalesVip || prodType == this.ckFrom.flashSalesSvip || prodType == this.ckFrom.vip || prodType == this.ckFrom.svip) {
          if (item.sales.status == 1 || item.sales.status == 2) {
            query.isSales = true;
          } else {
            prodType = this.ckFrom.vip;
          }
        }
        goDetails(this, item.prodType, prodId, query, item.courseType, 1);
        return
      } else if (item.marketType == 'friendHelperList') {
        let type = item.prodType;
        let prodId = item.prodId;
        // 跳转到对应的详情页面 好友灌溉接口约定的prodType  0视频，1音频，2图文，3课程，4专栏，5vip升级页面，6测评，7交互测评，8语音测评，9知识套餐，10打卡，11训练营 ，12社群，13约课，14直播，15电子书，16资料库
        // 将好友灌溉接口约定的prodType 转为 goDetails.js中typeToUrl的key值
        let typeArr = [5, 5, 5, 5, 9, 1, 11, 75, 77, 61, 41, 78, 10, 53, 51, 142, 8];
        type = typeArr[Number(type)];
        let query = {}
        if (type == global.ckFrom.vip && (item.btnStatus == 1 || item.btnStatus == 2)) {
          query.isFa = true;
          prodId = item.faId;
        }
        goDetails(this, type, prodId, query, (item.courseType || 0), 1);
        return
      } else if (item.marketType == 'bargainList') {
        let query = {}
        let prodId = item.prodType == this.ckFrom.activity ? item.extraId : item.prodId
        if ((item.prodType == this.ckFrom.vip || item.prodType == this.ckFrom.svip) && item.status < 3) {
          query.isBargain = true;
        }
        goDetails(this, item.prodType, prodId, query, (item.courseType || 0), 1);
        return
      } else if (item.marketType == 'collocationBuy') {
        goDetails(this, item.prodType, item.pcId);
      }
    },
    clickMore() {
      this.$emit('clickMore');
    },
    clockerFinishFun(index) {
      let marketType = this.itemList[index].marketType;
      let info = '';
      if (marketType == 'flashSalesList') {
        info = this.itemList[index].sales;
      } else {
        info = this.itemList[index];
      }
      if (info) {
        info.status = info.status == 1 ? 2 : 3;
      }
    },
    clockerTimeFun(index) {
      let marketType = this.itemList[index].marketType;
      let stime = 0;
      let etime = 0;
      let time = '';
      let status = 0;
      let nowTime = (new Date()).getTime();
      if (marketType == 'flashSalesList') {
        stime = utilJs.getTimeByDate(this.itemList[index].sales.startTime);
        etime = utilJs.getTimeByDate(this.itemList[index].sales.endTime);
      } else if (marketType == 'collageList' || marketType == 'bargainList') {
        stime = utilJs.getTimeByDate(this.itemList[index].startTime);
        etime = utilJs.getTimeByDate(this.itemList[index].endTime);
      } else if (marketType == 'friendHelperList') {
        stime = utilJs.getTimeByDate(this.itemList[index].startAt);
        etime = utilJs.getTimeByDate(this.itemList[index].endAt);
      } else if (marketType == 'collocationBuy') {
        stime = utilJs.getTimeByDate(this.itemList[index].startTime);
        etime = utilJs.getTimeByDate(this.itemList[index].endTime);
      }
      if (stime > nowTime) {
        status = 1
        time = stime;
      } else if (etime > nowTime) {
        status = 2;
        time = etime;
      } else {
        status = 3;
      }
      if (marketType == 'flashSalesList') {
        this.itemList[index].sales.status = status;
      } else if (marketType == 'collageList' || marketType == 'bargainList') {
        this.itemList[index].status = status;
      } else if (marketType == 'friendHelperList') {
        this.itemList[index].btnStatus = status;
      } else if (marketType == 'collocationBuy') {
        this.itemList[index].pcStatus = status;
      }
      return time;
    },
  }
};
</script>

<style scoped>
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: 0.9rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
}
.bd1-FF300C {
  border: 1px solid #FF300C;
}
.position {
  /* left: -0.05rem;
  top: -0.05rem; */
}
.redBtnBg {
  background: linear-gradient(-90deg, #F72E2B 0%,#FF6C24 100%);
}
.activityBg {
  background: rgba(255, 48, 12, 0.1);
}
.noActivityBg {
  background: rgba(153, 153, 153, 0.1);
}
.marketBtnBg1 {
  background-image: url('../../../src/assets/i/wap/index/market1.png');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 101% 100%;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.marketBtnBg2 {
  background-image: url('../../../src/assets/i/wap/index/market2.png');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 101% 100%;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.marketBtnBg4 {
  background-image: url('../../../src/assets/i/wap/index/market4.png');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 101% 100%;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}
.marketBtnBg5 {
  background-image: url('../../../src/assets/i/wap/index/market5.png');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 101% 100%;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.ww250 {
  width: 6.25rem;
}
.p-l-2 {
  left: -0.05rem;
}
.scale96 {
  transform: scale(0.96);
}
.w50-8 {
  width: calc(50% - 0.2rem);
}
.w100-12 {
  width: calc(100% - 0.3rem);
}
.theme-market .c-index-market {
  background-image: linear-gradient(90deg, #FF4C24 0%, #FF0400 100%);
}
.theme-market .theme-bg-gradient {
  background-image: linear-gradient(90deg, #FF4C24 0%, #FF0400 100%);
}
.theme-market .theme-fc {
  color: #FF0400;
}
.theme-market .theme-bg-10 {
  background-color: rgba(255, 4, 0, 0.1);
}
</style>
